<template>
	<div v-if="key == this.routePath.defaultPath">
		<div align="left">
			<el-button type="info" @click="back">返回上级</el-button>
			<el-button type="primary" @click="handleAddTimeSection">增加时间区间</el-button>
		</div>
		<el-divider></el-divider>
		<!-- 列表 -->
		<el-table :data="dataList" minheight="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading">
			<el-table-column label="序号" type="index" align="center" width="50"></el-table-column>
			<el-table-column label="场次编号" prop="sceneCode" align="center"></el-table-column>
			<el-table-column label="场次名称" prop="sceneName" align="center"></el-table-column>
			<el-table-column label="开始时间" prop="startTime" align="center"></el-table-column>
			<el-table-column label="结束时间" prop="endTime" align="center"></el-table-column>
			<el-table-column label="商品数量" prop="goodsCount" align="center"></el-table-column>
			<el-table-column label="操作" align="center" width="150" fixed="right">
				<template slot-scope="scope">
					<el-button v-if="permission_goods" type="text" size="small" @click="handleView(scope.row.sceneCode)">查看</el-button>
					<el-button v-if="permission_delete" type="text" size="small" @click="handleRemove(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<!-- 新增/修改弹出框 -->
		<el-dialog title="添加时间段" :visible.sync="dialogFormVisible">
			<el-table :data="timeSectionList" minheight="calc(100VH - 270px)" highlight-current-row border style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="场次名称" prop="sceneName" align="center" ></el-table-column>
				<el-table-column label="开始时间" prop="startTime" align="center" >
					<template slot-scope="scope">{{scope.row.startTime}}</template>
				</el-table-column>
				<el-table-column label="结束时间" prop="endTime" align="center" >
					<template slot-scope="scope">{{scope.row.endTime}}</template>
				</el-table-column>
				<el-table-column label="时间状态" prop="timeStatus" width="140" align="center">
					<template slot-scope="scope">
						{{scope.row.timeStatus == '1'?'启用':'禁用'}}
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
				<template v-if="sceneCodes.length > 0">
					<el-button type="primary"  @click="submitAddTimeSection">确定</el-button>
				</template>
			</div>
			
		</el-dialog>
		
	</div>
	<div v-else>
		<router-view :key="key"></router-view>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	import { findActivitySenceList,findTimeSectionList ,addActivitySence,removeActivitySence} from '@/api/activity/seckill'
	export default {
		name: 'seckillActivitySence',
		data() {
			return {
				// 默认加载弹出层
				loading: true,
				//路由地址
				routePath: {
					defaultPath: '/activity/seckill/time',
					goodsPath: '/activity/seckill/time/goods'
				},
				// 数据列表el-table
				dataList: [],
				seckillCode: '',
				timeSectionList: [],
				dialogFormVisible:false,
				permission_delete:false,
				permission_goods:false,
				sceneCodes: [],
			}
		},
		computed: {
			key() {
				return this.$route.path
			},
			...mapGetters([
				'elementList'
			])
		},
		components: {},
		created() {
			if (this.$route.path === this.routePath.defaultPath) {
				this.seckillCode = this.$route.query.seckillCode
				console.log(this.$route.query.seckillCode)
				// 初始化获取数据列表
				this.getDateList()
				//初始化按钮权限
				this.permission_goods = this.elementList['activity:seckillgoods:list']
				this.permission_delete = this.elementList['activity:activitysence:remove']
				
			}
		},
		methods: {
			// 方法集合
			getDateList() {
				this.loading = true
				findActivitySenceList(this.seckillCode).then(res => {
					this.dataList = res.data.responseData
				})
				this.loading = false
			},
			handleView(val) {
				this.$router.push({
					path: this.routePath.goodsPath,
					query: {sceneCode: val,seckillCode:this.seckillCode}
				});
			},
			//返回上级菜单
			back() {
				this.$router.go(-1)
			},
			handleAddTimeSection(){
				this.dialogFormVisible = true
				this.loading = true
				findTimeSectionList(this.seckillCode).then(res =>{
					if(res.data.responseCode == '200'){
						if(res.data.responseData.length > 0){
							this.timeSectionList = res.data.responseData
						}
					}
				})
				this.loading = false
			},
			cancel(){
				this.dialogFormVisible = false
			},
			handleRemove(val){
				this.$confirm('移除后所关联商品将一并删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					removeActivitySence(val).then(() => {
						this.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success',
							duration: 2000,
							onClose: this.getDateList()
						});
					}).catch((err) => {
						this.$message.error(err.data.responseMessage);
					});
				});
			},
			handleSelectionChange(selection){
				this.sceneCodes = selection.map(item => item.sceneCode)
			},
			submitAddTimeSection(){
				let params = {
					seckillCode: this.seckillCode,
					senceCodeList: this.sceneCodes
				}
				addActivitySence(params).then(res =>{
					if(res.data.responseCode == '200'){
						this.$notify({
							title: '添加成功',
							message: '添加成功',
							type: 'success',
							duration: 2000,
							onClose: this.getDateList()
						})
						this.dialogFormVisible = false
						this.timeSectionList = []
					}
				}).catch(err => {
					this.$message.error(err.data.responseMessage);
				})
			}
		}
	}
</script>
